// let main = document.querySelector("#main");
// main.style.width = window.innerWidth
// main.style.height = window.innerHeight
new Vue({
  el: '#app',
  data() {
    return {
      form: {
        App_ID: '',
        Open_ID: '',
        token: $.cookie("token"),
      },
      shop: []
    }
  },
  mounted() {
    // const App_ID = sessionStorage.getItem("App_ID")
    // const Open_ID = sessionStorage.getItem("Open_ID")
    // console.log(this.App_ID, this.Open_ID)
    this.getList(this.form)

  },
  methods: {
    getList() {
      let _this = this
      var myChart = echarts.init(document.getElementById('main'), 'macarons');

      //创建Nodes
      nodes =
        [
          { name: "1", zs: "北货郎", label: "北货郎", category: 0 },
          { name: "2", zs: "南货郎", label: "南货郎", category: 0 },
          { name: "3", zs: "西货郎", label: "西货郎", category: 0 },
          { name: "4", zs: "随便", label: "随便", category: 0 },
          { name: "5", zs: "黑龙江数字供应链有限公司", label: "黑龙江数字供应链有限公司", category: 0 },
        ]
      //创建links
      let list = []
      let data = [{ source: "3", target: "1", type:'1' }, { source: "3", target: "2", type:'1' }, { source: "3", target: "4" , type:'1'}, { source: "3", target: "5", type:'1' },
      { source: "5", target: "1", type:'0' }, { source: "5", target: "2", type:'0' }, { source: "5", target: "4" , type:'0'}, { source: "5", target: "4", type:'0' }]
      data.forEach(item => {
        console.log(item)
        if (item.type=='1') {
          list.push(
            { weight: 1, "zs": " <b><font color='red'> ————> </font></b> <br>  销售 <br><br>   ", source: item.source, target: item.target },
          )
        } else {
          list.push(
            { weight: 1, "zs": " <b><font color='blue'> ————> </font></b> <br>  求购 <br><br>   ", source: item.source, target: item.target },
          )
        }
      })
  
      categoryArray = []
      jsondata = { "categories": categoryArray, "nodes": nodes, "links": list }

      //数据格式为Json格式
      createGraph(myChart, jsondata)
    },
    onSerach() {
      this.getList(this.form)
    }
  }
})



function getOption(graphInfo) {
  // for (var i = 0; i < graphInfo.nodes.length; i++) {
  //     graphInfo.nodes[i].x = null;
  //     graphInfo.nodes[i].y = null;
  //     graphInfo.nodes[i].draggable = true;
  // }


  title = graphInfo['title'];
  nodes = graphInfo['nodes'];
  links = graphInfo['links'];
  categories = graphInfo['categories'];

  //设置option样式
  var option = {
    title: {
      text: title,
      x: 'right',
      y: 'bottom'
    },
    tooltip: {
      trigger: 'item',
      //formatter: '{a} : {b}'
      formatter: function (params) {//触发之后返回的参数，这个函数是关键
        //if (params.data.category !=undefined) //如果触发节点
        //   window.open("http://www.baidu.com")
        var abc = "<b>" + params.data.zs + "</b>";
        return abc;
      }
    },
    color: ['#EE6A50', '#4F94CD', '#B3EE3A', '#DAA520'],
    toolbox: {
      show: true,
      feature: {
        restore: { show: true },
        magicType: { show: true, type: ['force', 'chord'] },
        saveAsImage: { show: true }
      }
    },
    legend: {
      x: 'left',
      data: categories

    },
    series: [
      {
        type: 'force',
        name: title,
        ribbonType: false,
        categories: categories,
        itemStyle: {
          normal: {
            label: {
              show: true,
              textStyle: {
                color: '#333'
              }
            },
            nodeStyle: {
              brushType: 'both',
              borderColor: 'rgba(255,215,0,0.4)',
              borderWidth: 1
            },
            linkStyle: {
              type: 'curve'
              //,text:"hahahah"

            }

          },
          emphasis: {
            label: {
              show: false
              // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
            },
            nodeStyle: {
              //r: 30
            },
            linkStyle: {}
          }
        },

        useWorker: false,
        minRadius: 20,
        maxRadius: 20,
        gravity: 3.1,
        scaling: 2.5,
        linkSymbol: 'arrow',
        roam: 'move',
        nodes: nodes,
        links: links
      }
    ]
  };
  return option;
}
function createGraph(myChart, mygraph) {
  //设置option样式
  option = getOption(mygraph)
  //使用Option填充图形
  myChart.setOption(option);
  //点可以跳转页面
  // myChart.on('click', function (params) {
  //             var data=params.value
  //             //点没有source属性
  //             if(data.source==undefined){
  //                 nodeName=params.name
  //                 window.open("http://www.baidu.com")
  //             }
  // });
  myChart.on('mouseup', function (params) {
    var option = myChart.getOption();
    option.series[0].data[params.dataIndex].x = params.event.offsetX;
    option.series[0].data[params.dataIndex].y = params.event.offsetY;
    option.series[0].data[params.dataIndex].fixed = true;
    myChart.setOption(option);
  });
  //myChart.hideLoading();
}
